<template>
  <div class="Layout">
    <div class="circle" style="transform: scale(0.8);"></div>
    <div class="circle" style="transform: scale(0.6);"></div>
    <div class="circle" style="transform: scale(0.4);"></div>
    <div class="circle" style="transform: scale(0.2);"></div>
    <div class="circle" style="transform: scale(0.05);"></div>
    <div class="Block"></div>
  </div>
</template>
<script setup>

</script>
<style lang="less" scoped>
.Block {
  position: absolute;
  left: 0%;
  width: 50%;
  height: 50%;
  background-image: linear-gradient(45deg, rgba(0, 128, 0, 0) 45%, green);
  transform-origin: right bottom;
  animation: Block infinite linear 5s;
}

@keyframes Block {
  100% {
    transform: rotateZ(360deg);
  }
}

.Layout {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden; 
  border: 1px solid green;
  position: relative;
}

.Layout::after,
.Layout::before {
  content: '';
  display: block;
  position: absolute;
  background-color: green;
}

.Layout::after {
  width: 1px;
  height: 100%;
  left: 50%;
}

.Layout::before {
  height: 1px;
  width: 100%;
  top: 50%;
}

.circle {
  position: absolute;
  left: 0;
  right: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid green;
}
</style>
